<%--
  Created by IntelliJ IDEA.
  User: 86158
  Date: 2020/7/28
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="../layui/css/layui.css?t=1594038785991" media="all">
    <style>
        body{margin: 10px;}
    </style>

</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<div class="layui-tab layui-tab-brief" lay-filter="demo">
    <div class="layui-tab-content">
        <div class="layui-tab-item">
            <div id="laydateDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div id="pageDemo"></div>
        </div>
        <div class="layui-tab-item">
            <div id="sliderDemo" style="margin: 50px 20px;"></div>
        </div>
    </div>
</div>

<blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>


<script src="../layui/layui.js?t=1594038785991"></script>
<script>
    layui.config({
        version: '1594038785991' //为了更新 js 缓存，可忽略
    });

    layui.use(['laypage', 'layer', 'table', 'element', 'jquery'], function(){
        var laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table //表格
            ,element = layui.element //元素操作
            ,$ = layui.jquery

        //向世界问个好
        // layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                tips: 1
            });
        });
// <script>
//     lae;yui.use('table', function(){
//         var table = layui.tabl
/*//主键
    private int rid;
    //路由名称标示
    private String rgatewayApiName;
    //服务接口地址
    private String rinsideApiUrl;
    //服务名称
    private String rserviceld;
    //介绍消息
    private String rdescription;
    //状态
    private int rstate;
    //幂等性
    private int ridempotents;
    //是否收费
    private int rneedfee;*/
        table.render({
            elem: '#test'
            ,url:'/BYSSM_war_exploded/coute/'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,cols: [[
                {checkbox:true},
                {field:'rid', width:80, title: '路由RID', sort: true}
                ,{field:'rgatewayApiName', width:80, title: '路由名称标示',sort:true}
                ,{field:'rinsideApiUrl', width:80, title: '服务接口地址'}
                ,{field:'rserviceld', width:80, title: '服务名称',sort:true}
                ,{field:'rdescription', width:80, title: '介绍消息',sort:true}
                ,{field:'rstate', width:80, title: '状态1正常，0停用'}
                ,{field:'ridempotents', width:80, title: '幂等性 1幂等性，0非幂等性'}
                ,{field:'rneedfee', width:80, title: '是否收费 1收费，0不收费'}
                ,{field:'right', width:178, title: '操作',toolbar: '#barDemo'}
            ]]
            // ,page:true
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: true //不显示首页
                ,last: true //不显示尾页
            }
        });
//监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    layer.open({
                        type: 2,
                        title: '新增应用',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['480px', '72%'],
                        shadeClose: false,
                        content: '/BYSSM_war_exploded/AddApplication.jsp', //iframe的url
                        end:function () {
                            window.location.href = '../Page', target = 'content';
                        }
                    })
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].aid);
                    }
                    break;
                case 'delete':
                    if (data.length > 0) {
                        layer.confirm('确定删除吗？', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&aids=" + obj.aid
                            })
                            alert(param);
                            $.ajax({
                                url: '/BYSSM_war_exploded/deleteApplication1',
                                data: param,
                                method: 'get',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('test', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test
            // 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
                layer.open({
                    type: 2,
                    title: '查看应用信息',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['480px', '72%'],
                    shadeClose: false,
                    content: '/BYSSM_war_exploded/selectApplicationById1/' + data.aid //iframe的url
                })
            } else if(layEvent === 'del'){
                // console.log(data.id);
                layer.confirm('是否删除应用' + data.aappName, function(index){
                    $.get("/BYSSM_war_exploded/deleteApplication/" + data.aid , function (res) {
                        if (res == "success") {
                            layer.msg('删除成功',  {time: 1800}, function () {
                                layer.close(index);
                                window.location.href = '../Page', target = 'content';
                            });
                        } else {
                            layer.msg('删除失败', {time:1800}, function () {
                                layer.close(index);
                            });
                        }
                    })
                    // obj.del(); //删除对应行（tr）的DOM结构

                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
                layer.open({
                    type: 2,
                    title: '应用信息修改',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['480px', '72%'],
                    shadeClose: false,
                    content: '/BYSSM_war_exploded/selectApplicationById2/' + data.aid, //iframe的url
                    end:function () {
                        window.location.href = '../Page', target = 'content';
                    }
                })
            }
        });

        // //分页
        // laypage.render({
        //     elem: 'pageDemo' //分页容器的id
        //     ,count: 100 //总页数
        //     ,skin: '#1E9FFF' //自定义选中色值
        //     //,skip: true //开启跳页
        //     ,jump: function(obj, first){
        //         if(!first){
        //             layer.msg('第'+ obj.curr +'页', {offset: 'b'});
        //         }
        //     }
        // });
    });

</script>
</body>
</html>
